{% extends "base.html" %}
{% block title %}角色列表{% endblock %}
{% block content %}
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            Amaze UI 文字列表
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">Amaze UI CSS</a></li>
            <li class="am-active">文字列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 列表
                </div>
                <div class="tpl-portlet-input tpl-fz-ml">
                    <div class="portlet-input input-small input-inline">
                        <div class="input-icon right">
                            <i class="am-icon-search"></i>
                            <input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>
                    </div>
                </div>


            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <button type="button" class="am-btn am-btn-default am-btn-success">
                                    <a href="/role/add" style="color: #fff;"><span
                                            class="am-icon-plus"></span> 新增</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <form class="am-form">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <th class="table-id">ID</th>
                                    <th class="table-title">角色名</th>
                                    <th class="table-type">角色描述</th>
                                    <th class="table-set">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for role in role_list %}
                                    <tr>
                                        <td>{{ role.id }}</td>
                                        <td>{{ role.name }}</td>
                                        <td>{{ role.desc }}</td>
                                        <td>
                                            <div class="am-btn-toolbar">
                                                <div class="am-btn-group am-btn-group-xs">
                                                    <a href="{{ url_for('role.update_role', id=role.id) }}"
                                                       data-id="{{ role.id }}"
                                                       class="am-btn am-btn-default am-btn-xs am-text-secondary edit">
                                                        <span class="am-icon-pencil-square-o"></span> 编辑
                                                    </a>
                                                    <div data-id="{{ role.id }}"
                                                         class="delete am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
                                                        <span class="am-icon-trash-o"></span> 删除
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            <hr>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block myscript %}
    <script type="text/javascript">
        $('body').on('click', '.am-btn.delete', function (event) {
            var id = $(this).attr('data-id')
            var confirm = layer.confirm('确定删除角色吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                layer.close(confirm)
                var index = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                ME.sendRequest('{{ url_for("role.delete_role") }}','POST',{id:id},function(res){
                    if(res.state == 200){
                        layer.msg('删除成功', {icon: 1});
                        window.location.reload()
                    }else{
                        layer.msg('删除失败，请重试', {icon: 2});
                    }
                },function(){
                    layer.msg('删除失败，请重试', {icon: 2});
                },function(){
                })
            }, function () {

            });
            console.log()
        });

    </script>
{% endblock %}